<template>
	<view>
		<view class="edgeInsetTop"></view>
		<wanl-empty v-if="addressList.length === 0 && status !== 'loading'" text="平台没有翻译入驻"/>
		<view class="margin-top-bj">
			<view class="cu-list menu-avatar">
				<view class="cu-item" v-for="(item, index) in addressList" :key="item.id">
					<view class="cu-avatar round lg">
					  <!-- 优先显示用户上传头像 -->
					   <image 
					       :src="$wanlshop.oss(item.avatar, 90, 90, 2, 'avatar')" 
					       mode="aspectFit"
					       @tap.stop="previewImage(item.avatar)"
					     ></image>
					  <!-- 调试用（临时显示完整用户名） -->
					  <text v-if="showDebug" class="debug-text">{{ item.user.username }}</text>
					</view>
					
					<view class="content">
						<view class="flex justify-between">
							<view>
								<text class="wanl-pip margin-right-sm text-lg">{{ item.username }}</text>
								<text class="wanl-gray-light text-sm">{{ item.phone }}</text>
							</view>
							<button class="cu-btn round sm bg-gradual-orange" @tap.stop="showContact(item)">联系</button>
						</view>
						
						<view class="text-sm wanl-gray margin-top-xs" 
						      style="line-height: 1.5; word-break: break-word; white-space: normal;">
						  {{ item.content || '暂无个人介绍' }}
						</view>
						
						<!-- <view class="image-container" v-if="item.smallimages">
						  <image class="preview-image" 
						    v-for="(img,idx) in item.smallimages.split(',')" 
						    :key="idx"
						    :src="$wanlshop.oss(img, 100, 100)" 
						    mode="aspectFill"
						    @tap.stop="previewImage(item.smallimages.split(','), idx)">
						  </image>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
		
		<view class="cu-modal" :class="contactModal ? 'show' : ''">
			<view class="cu-dialog" @tap.stop>
				<view class="cu-bar bg-white justify-end">
					<view class="content">联系方式</view>
					<view class="action" @tap="hideContactModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="flex align-center margin-bottom" v-if="currentContact.phone">
						<text class="wlIcon-dianhua margin-right"></text>
						<text>{{ currentContact.phone }}</text>
						<button class="cu-btn round sm bg-green margin-left" @tap="makePhoneCall(currentContact.phone)">拨打</button>
					</view>
					<view class="flex align-center" v-if="currentContact.wx">
						<text class="wlIcon-weixin margin-right"></text>
						<text>{{ currentContact.wx }}</text>
						<button class="cu-btn round sm bg-green margin-left" @tap="copyWechat(currentContact.wx)">复制</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			source: 0,
			order_id: 0,
			addressList: [],
			currentContact: {
				phone:'',
				wx:'',
			},
			contactModal: false,
			total: 0,
			current_page: 1,
			last_page: 1,
			status: 'loading',
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载..',
				contentnomore: ''
			}
		};
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		if(this.current_page >= this.last_page){
			this.status = 'noMore';
		}else{
			this.current_page = this.current_page + 1;
			this.status = 'loading';
			this.loadData(true);
		}
	},
	onLoad(option) {
		this.source = option.source;
		this.order_id = option.order_id;
		this.loadData();
	},
	methods: {
		async loadData(reload) {
			await uni.request({
				url: '/wanlshop/Arrival/getArrivalAuditList',
				data:{ page: reload ? this.current_page : 1 },
				success: res => {
					if(reload){
						this.addressList = this.addressList.concat(res.data.data);
					}else{
						this.addressList = res.data.data;
						uni.stopPullDownRefresh();
					}
					this.total = res.data.total;
					this.current_page = res.data.current_page;
					this.last_page = res.data.last_page;
					this.status = res.data.total == 0 ? 'noMore':'more';
				}
			});
		},
		showContact(item) {
			this.currentContact = {
				phone: item.phone,
				wx: item.wx
			};
			this.contactModal = true;
		},
		hideContactModal() {
			this.contactModal = false;
		},
		makePhoneCall(phone) {
			uni.makePhoneCall({ phoneNumber: phone });
		},
		copyWechat(wechat) {
			uni.setClipboardData({
				data: wechat,
				success: () => {
					this.$wanlshop.msg('微信号已复制');
				}
			});
		},
		previewImage(images, index) {
			images = this.$wanlshop.oss(images);
			uni.previewImage({
				current: typeof images === 'string' ? 0 : index,
				urls: typeof images === 'string' ? [images] : images
			});
		}
		
	}
};
</script>

<style>
	.default-avatar {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 50%;
	  height: 50%;
	  background-color: #f0f0f0;
	  color: #666;
	}
	
	.debug-text {
	  position: absolute;
	  bottom: -30rpx;
	  left: 0;
	  font-size: 24rpx;
	  color: red;
	}
.cu-list.menu-avatar>.cu-item {
	padding: 20rpx 0;
	min-height: 240rpx; /* 增加最小高度 */
	align-items: flex-start;
}

.cu-avatar.lg {
	 width: 100rpx !important;
	  height: 100rpx !important;
	  position: relative;
	  overflow: hidden;
	  display: flex;
	  align-items: center;
	  justify-content: center;
}

.content {
	width: calc(100% - 120rpx);
}

.text-cut {
	 display: block;
	  -webkit-line-clamp: unset; /* 移除行数限制 */
	  -webkit-box-orient: unset; /* 移除垂直方向限制 */
	  overflow: visible; /* 允许内容溢出 */
	  text-overflow: unset; /* 移除省略号 */
	  white-space: normal; /* 允许换行 */
	  word-break: break-word; /* 单词内换行 */
}

.image-container {
	margin-top: 20rpx;
}

.preview-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
}

.cu-modal .cu-dialog {
	width: 80%;
	max-width: 600rpx;
	border-radius: 16rpx;
	overflow: hidden;
}

.cu-modal .padding-xl {
	padding: 30rpx 40rpx;
}
</style>
